<template>
    <div class="comment">
        <!--提交评论-->
        <div class="comment_sub">
            <h3>提交评论</h3>
            <p class="comment_line"></p>
            <textarea placeholder="请输入您的评论内容" ></textarea>
            <mt-button type="primary" size="large" >提交评论</mt-button>
        </div>
        <!--评论列表-->
        <div class="comment_main">
            <h3>评论列表</h3>
            <p class="comment_line"></p>
            <ul class="mui-table-view">
                <li class="mui-table-view-cell" v-for="(item,index) in commentsData" :key="index + item.add_time">
                    <div class="comment_main_list">
                        <span>第{{index+1}}楼&nbsp;&nbsp;</span>
                        <span>用户: {{item.user_name}}&nbsp;&nbsp;</span>
                        <span>发表时间: {{item.add_time}}</span>
                    </div>
                    <div class="comment_content">
                        {{item.content === 'undefined' ? '暂无内容' : item.content}}
                    </div>
                </li>
            </ul>
            <mt-button type="danger" plain size="large" @click="getMore" >加载更多</mt-button>
        </div>
    </div>
</template>

<script>
    import axios from 'axios'
    import {Toast} from 'mint-ui'

  export default {
    name: "Comment",
    data() {
      return {
        commentsData: [], //所有的评论数据
        pageIndex: 1, //默认展示第一页数据
      }
    },
    props: ['id'],
    created() {
      this.getComments()
    },
    methods: {
      // 获得评论数据
      getComments() {
        axios.get('http://wxtest.centaline.com.cn/api/api?type=getcomments&artid=' + this.id +'&pageindex=' + this.pageIndex)
          .then(res => {
            if (res.data.status === 0) {
              this.commentsData = this.commentsData.concat(res.data.message)
            } else {
              Toast('请求数据失败,重新连接!!')
            }
          })
      },

      // 加载更多
      getMore() {
        this.pageIndex ++;
        this.getComments();
      },


    },
  }
</script>

<style scoped>
    .comment h3 {
        font-size: 22px;
        margin-top: 30px;
    }
    /*提交评论*/
    .comment .comment_line {
        width: 100%;
        height: 2px;
        margin-top: 10px;
        margin-bottom: 20px;
        background-color: #ccc;
    }
    .comment_sub textarea {
        font-size: 14px;
        height: 85px;
    }

    /*评论列表*/
    .comment_main_list {
        font-size: 12px;
        background-color: rgba(0,0,0,.1);
    }
    .comment_content {
        font-size: 14px;
        text-indent: 2em;
    }




</style>